<%--
  Created by IntelliJ IDEA.
  User: 仁
  Date: 2021-03-09
  Time: 8:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>药店销售管理系统</title>
    <base href="<%=request.getContextPath()%>/"/>
    <link rel="stylesheet" href="webjars/layui/2.5.5/css/layui.css">
</head>
<body>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this" style="margin-left:31%">药品审核入库</li>
        <li style="margin-left:20%">查看进货记录</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">


        <div class="layui-tab-item layui-show">
            <div class="layui-container">
                <div class="layui-collapse">
                    <div class="layui-colla-item">
                        <div class="layui-colla-title">查询条件</div>
                        <div class="layui-colla-content layui-show">
                            <form class="layui-form layui-inline">
                                <div class="layui-inline">
                                    <input type="text" class="layui-input" id="dname" placeholder="根据药品名称进行查询">
                                </div>
                                <div class="layui-input-inline">
                                    <button type="button" class="layui-btn" id="cxun" onclick="searcha()" data-type="reload">查询</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <table id="infoTb" lay-filter="infoTb"></table>
            </div>
        </div>

        <script type="text/html" id="active">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin-left: 0px">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="update">添加</button>
                    </div>
                </div>
            </form>
        </script>

        <div class="layui-tab-item">
            <div class="layui-container">
                <div class="layui-collapse">
                    <div class="layui-colla-item">
                        <div class="layui-colla-title">查询条件</div>
                        <div class="layui-colla-content layui-show">
                            <form class="layui-form layui-inline">
                                <div class="layui-inline">
                                    <input type="text" class="layui-input" id="drugname" placeholder="根据药品名称进行查询">
                                </div>
                                <div class="layui-input-inline">
                                    <button type="button" class="layui-btn" id="chaxun" onclick="search()" data-type="reload">查询</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <table id="roleTb" lay-filter="roleTb"></table>
            </div>
        </div>

    </div>

    <div id="update" style="display: none">
        <form class="layui-form" lay-filter="updateForm"  style="padding: 50px" id="updateForm">
            <input  type="hidden" name="id" required  lay-verify="required" placeholder="隐藏id" autocomplete="off" class="layui-input">
            <div class="layui-form-item">
                <label class="layui-form-label">药品名称:</label>
                <div class="layui-input-inline">
                    <input  type="text" name="drugname" required  lay-verify="required" disabled placeholder="请输入药品名称" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">厂商:</label>
                <div class="layui-input-inline">
                    <input  type="text" name="changshang" required  lay-verify="required" disabled placeholder="请输入厂商" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">备注:</label>
                <div class="layui-input-inline">
                    <input  type="text" name="beizhu" required  lay-verify="required" disabled placeholder="请输入备注" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">药品位置:</label>
                <div class="layui-input-inline">
                    <input  type="text" name="location" required  lay-verify="required" disabled placeholder="请输入药品位置" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">单位:</label>
                <div class="layui-input-inline">
                    <input  type="text" name="unit" required  lay-verify="required" disabled placeholder="请输入单位" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">规格:</label>
                <div class="layui-input-inline">
                    <input  type="text" name="guige" required  lay-verify="required" disabled placeholder="请输入规格" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">条形码:</label>
                <div class="layui-input-inline">
                    <input  type="text" name="tiaoxingma" required  lay-verify="required" disabled placeholder="请输入条形码" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">生产日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="begindate" class="layui-input" id="test1">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">有效期至:</label>
                <div class="layui-input-inline">
                    <input  type="text" name="date" required  lay-verify="required" placeholder="" id="test2" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">生产批号:</label>
                <div class="layui-input-inline">
                    <input  type="text" name="pihao" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">进货时间:</label>
                <div class="layui-input-inline">
                    <input  type="text" name="jinhuo_time" required  lay-verify="required" id="test3" placeholder="" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">销售价格:</label>
                <div class="layui-input-inline">
                    <input  type="text" name="price" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">进价:</label>
                <div class="layui-input-inline">
                    <input  type="text" name="beginprice" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">数量:</label>
                <div class="layui-input-inline">
                    <input  type="text" name="amount" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">金额:</label>
                <div class="layui-input-inline">
                    <input  type="text" name="sum" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>

        </form>
    </div>

</div>
<script src="webjars/layui/2.5.5/layui.js"></script>
<script>

    // $("amount").blur(function(){
    //
    // });

    layui.use(["jquery","element","table","layer","form","laydate"],function () {
        let $=layui.jquery;
        let table=layui.table;
        let table1=layui.table;
        let layer=layui.layer;
        var laydate = layui.laydate;
        //常规用法
        laydate.render({
            elem: '#test1'
        });
        laydate.render({
            elem: '#test2'
        });
        laydate.render({
            elem: '#test3'
        });
        table.render({
            id:'infoTb'
            ,elem: '#infoTb'
            ,url: '/druginfo/search' //数据接口
            ,toolbar:"#toolbar"
            ,cols: [[ //表头\
                {field: 'drugname', title: '药名',}
                ,{field: 'changshang', title: '厂商',  sort: true}
                ,{field: 'beizhu', title: '备注', }
                ,{field: 'location', title: '药品位置', }
                ,{field: 'unit', title: '单位', sort: true}
                ,{field: 'guige', title: '规格',  sort: true}
                ,{field: 'tiaoxingma', title: '条形码',}
                ,{title: '操作',templet:"#active"}
            ]],
            page:true
        });
        table1.on("tool(infoTb)",function ({data,event}) {
            switch (event) {
                case "update":
                    update(data)
                    break;
            }
        })
    })

    //添加功能
    function update(data) {
        layui.use(["jquery","table","layer"],function () {
            let table=layui.table;
            let layer=layui.layer;
            let $=layui.jquery;
            layui.form.val("updateForm",data);

            $("[name=amount]").blur(function(){
                var jj = $("[name=beginprice]").val();
                var sl = $("[name=amount]").val();
                var zongjia=jj*sl;
                $("[name=sum]").val(zongjia);
            });

            layer.open({
                type:1,
                content:$('#update'),
                area:["800px","650px1"],
                btn:["确定","取消"],
                title:"添加入库药品基础信息",
                yes(){
                    let parms=layui.form.val("updateForm");
                    $.post("/jinhuoxinxi/addjinhuo",parms);
                    $("#updateForm")[0].reset();
                    layer.close(layer.index);
                },
            });
        })

    }


    layui.use(['form','table','jquery'], function(){
            let table=layui.table;
            table.render({
                id:"roleTb",
                elem:"#roleTb",
                url:"jinhuoxinxi/pagexinxi",
                cols: [[
                    {title:"药品姓名",field: "drugname"},
                    {title:"厂商",field: "changshang"},
                    {title:"备注",field:"beizhu"},
                    {title:"数量",field:"amount"},
                    {title:"有效期",field:"date"},
                    {title:"批号",field:"pihao"},
                    {title:"进货时间",field:"begindate"},
                ]],
                page:{limit:12,limits:[24,36]}
            })
        })

    function search() {
        layui.use(["jquery","table"],function () {
            let $=layui.jquery;
            let drugname=$("#drugname").val();
            let where = {drugname:drugname};
            layui.table.reload("roleTb",{where});
        })
    }

    function searcha() {
        layui.use(["jquery","table"],function () {
            let $=layui.jquery;
            let table=layui.table;
            let nrr= $("#dname").val();
            let drugname=nrr;
            let where ={drugname,page:1};
            table.reload("infoTb",{where})
        })
    }


    layui.use('element', function(){
        var $ = layui.jquery,
            element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

    });


</script>
</body>
</html>
